<template>
  <div class="app-container">
    <div class="header">
      <div class="round-info">
        <span class="round-text">第 {{ currentRound }} 轮</span>
        <!-- <span class="timer">
          <i class="el-icon-time" @click="startTimer" style="cursor: pointer; font-size: 32px;"></i>
          <span class="time-text">{{ minutes }}:{{ seconds }}</span>
        </span> -->
      </div>
    </div>

    <div class="main-content">
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="qu-content" shadow="hover">
            <div v-if="currentQuestion" class="question-wrapper">
              <div class="question-header">
                <h1 class="round-title">抢答题 {{ currentQuestionIndex + 1 }}/8</h1>
              </div>
              
              <div class="question-content">
                <h2 class="question-text">{{ currentQuestion.content }}</h2>
                <transition name="fade">
                  <div v-if="showAnswer" class="answer-content">
                    <div class="answer-title">正确答案:</div>
                    <div class="answer-text">{{ currentQuestion.answer }}</div>
                  </div>
                </transition>
              </div>

              <div class="action-buttons">
                <el-button 
                  type="primary"
                  size="large"
                  class="action-btn"
                  @click="grabAnswer"
                  v-if="!showAnswer"
                  :disabled="isGrabbed"
                >
                  显示答案
                </el-button>
                <el-button 
                  type="success"
                  size="large"
                  class="action-btn"
                  @click="nextQuestion"
                  v-if="showAnswer"
                >
                  {{ isLastQuestion ? '下一轮' : '下一题' }}
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="btn">
      <el-button @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button @click="()=>this.$router.push({name:'FenceOff'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResponderState',
  
  data() {
    return {
      currentRound: 1,
      currentQuestionIndex: 0,
      showAnswer: false,
      isGrabbed: false,
      timer: null,
      timeLeft: 60,
      minutes: '00',
      seconds: '60',
      allQuestions: [
        // 第一轮 - 派出所基础业务
        {
          id: 1,
          content: '新时代公安派出所的工作目标是什么？',
          answer: '基础牢、出事少、治安好、党和人民满意。',
          round: 1
        },
        {
          id: 2,
          content: '加强派出所工作三年行动计划中的“三大行动”分别是什么？',
          answer: '基层提振行动、基础提质行动、基本能力提升行动',
          round: 1
        },
        {
          id: 3,
          content: '派出所最重要的工作是什么？',
          answer: '社区警务',
          round: 1
        },
        {
          id: 4,
          content: '原则上社区民警占派出所警力不低于多少？',
          answer: '40%',
          round: 1
        },
        {
          id: 5,
          content: '“六失”人员指什么？',
          answer: '投资失败、生活失意、心理失衡、关系失和、精神失常、年少失管',
          round: 1
        },
        {
          id: 6,
          content: '社区警务工作三大任务是什么？',
          answer: '规定任务、指令任务、推送任务',
          round: 1
        },
        {
          id: 7,
          content: '社区民警的主要职责是什么？',
          answer: '管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。',
          round: 1
        },
        {
          id: 8,
          content: '派出所“两队一室”分别指什么？',
          answer: '社区警务队、案件办理队和综合指挥室',
          round: 1
        },
        
        // 第二轮 - 队伍建设
        {
          id: 9,
          content: '社区民警对辖区实有人口应当做到“五知”，分别指什么？',
          answer: '知家庭住址、知联系方式、知工作单位、知生活来源、知来历流向。',
          round: 2
        },
        {
          id: 10,
          content: '派出所“一管三防”分别指什么？',
          answer: '管控治安要素、防辖区发案、防涉稳事端、防治安事故。',
          round: 2
        },
        {
          id: 11,
          content: '专职社区民警要求多少工作时间沉在社区？',
          answer: '80%以上',
          round: 2
        },
        {
          id: 12,
          content: '什么是社区民警工作的责任区？',
          answer: '警务区',
          round: 2
        },
        {
          id: 13,
          content: '新时代公安派出所的职责任务是什么？',
          answer: '维护辖区稳定、守护一方平安、服务人民群众、推进社区治理。',
          round: 2
        },
        {
          id: 14,
          content: '社区警务团队进行“四实”动态管理，“四实”指什么？',
          answer: '实人、实名、实号、实数',
          round: 2
        },
        {
          id: 15,
          content: '牢固树立“派出所主防”理念，坚持把派出所工作置于什么地位来抓？',
          answer: '战略性、基础性',
          round: 2
        },
        {
          id: 16,
          content: '社区民警在辖区工作一年以上，与哪些人员的“双向”熟悉率要求达到90%以上？',
          answer: '社区（村）干部、社区警务团队、重点单位保卫人员 ',
          round: 2
        },
        
        // 第三轮 - 信息化运用
        {
          id: 17,
          content: '“三调联动”指什么？',
          answer: '人民调解、行政调解、司法调解',
          round: 3
        },
        {
          id: 18,
          content: '社区民警收集社情民意，应当落实每周与哪些人员联系见面，了解社情民意、风险隐患和矛盾纠纷？',
          answer: '社区（村）书记、治保会主任',
          round: 3
        },
        {
          id: 19,
          content: '派出所民警“四种能力”分别指什么？',
          answer: '矛盾化解、要素管控、处警办案、群众工作',
          round: 3
        },
        {
          id: 20,
          content: '牢固树立大抓基层、大抓基础的鲜明导向，持续推动“三下”，“三下”指什么？',
          answer: '重心下移、警力下沉、保障下倾',
          round: 3
        },
        {
          id: 21,
          content: '新时代“枫桥经验”的基本内涵是什么 ？',
          answer: '矛盾不上交、平安不出事、服务不缺位 ',
          round: 3
        },
        {
          id: 22,
          content: '社区警务工作以什么为中心？',
          answer: '人',
          round: 3
        },
        {
          id: 23,
          content: '对家庭暴力加害人，首次查访未发现再次实施家庭暴力的，多长时间进行一次查访？',
          answer: '每三个月',
          round: 3
        },
        {
          id: 24,
          content: '派出所主防推行哪两项警务？',
          answer: '主动警务、预防警务',
          round: 3
        }
      ]
    }
  },

  computed: {
    currentRoundQuestions() {
      return this.allQuestions.filter(q => q.round === this.currentRound)
    },
    
    currentQuestion() {
      return this.currentRoundQuestions[this.currentQuestionIndex]
    },

    isLastQuestion() {
      return this.currentQuestionIndex === 7
    }
  },

  methods: {
    startTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      
      this.timeLeft = 60
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if(this.timeLeft <= 0) {
          this.showAnswer = true
          clearInterval(this.timer)
          this.$message({
            message: '答题时间已到!',
            type: 'warning',
            duration: 2000
          })
        }
      }, 1000)
    },

    grabAnswer() {
      this.isGrabbed = true
      this.showAnswer = true
      clearInterval(this.timer)
    },

    nextQuestion() {
      if(this.currentQuestionIndex < 7) {
        this.currentQuestionIndex++
        this.showAnswer = false
        this.isGrabbed = false
        this.timeLeft = 60
        this.minutes = '00'
        this.seconds = '60'
      } else if(this.currentRound < 3) {
        this.currentRound++
        this.currentQuestionIndex = 0
        this.showAnswer = false
        this.isGrabbed = false
        this.timeLeft = 60
        this.minutes = '00'
        this.seconds = '60'
        this.$message({
          message: `开始第 ${this.currentRound} 轮`,
          type: 'success',
          duration: 2000
        })
      } else {
        this.$message({
          message: '答题完成!',
          type: 'success',
          duration: 2000
        })
        // this.$router.push({name:'FenceOff'})
      }
    }
  },

  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  min-height: 100vh;
  background-image: url("/images/bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  padding: 30px;
  
  .round-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    
    .round-text {
      font-size: 36px;
      font-weight: bold;
      color: #f8f8f9;
    }
    
    .timer {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f56c6c;
      .time-text {
        font-size: 36px;
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }
}

.main-content {
  flex: 1;
  width: 100%;
  padding: 20px;
}

.qu-content {
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);

  .question-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .question-header {
    width: 100%;
    text-align: center;
    
    .round-title {
      font-size: 42px;
      color: #303133;
      margin: 0;
    }
  }

  .question-content {
    width: 100%;
    text-align: center;
    
    .question-text {
      font-size: 38px;
      color: #303133;
      margin-bottom: 40px;
      line-height: 1.5;
    }

    .answer-content {
      padding: 30px;
      background-color: #f5f7fa;
      border-radius: 8px;
      
      .answer-title {
        font-size: 35px;
        color: #409EFF;
        margin-bottom: 20px;
        font-weight: bold;
      }
      
      .answer-text {
        font-size: 34px;
        line-height: 1.8;
        color: #606266;
      }
    }
  }

  .action-buttons {
    margin-top: 40px;

    .action-btn {
      padding: 20px 50px;
      font-size: 24px;
    }
  }
}

.btn {
  width: 98%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;

  // .el-button {
  //   font-size: 20px;
  //   padding: 15px 30px;
  // }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>